<template>
  <div id="app">
    <jheader></jheader>
<!--     <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->

    <!-- :collapse="isCollapse" -->
    <el-menu
      v-show='islogin'
      
      :default-active="activeMenu"
      class="el-menu-vertical-demo">
      <jmenu :list='routeList' :hide='isCollapse'></jmenu>
    </el-menu>

    <div class="mainRouter">
      <breadlist :list='breadList' v-show='islogin'></breadlist>

      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>

  </div>

</template>

<script>
import jheader from './components/Header';
import jmenu from './components/menu';
import breadlist from './components/breadList';

export default {
  name: 'app',
  data () {
    return {
      islogin:null,
      isCollapse:false,
      activeMenu:'',
      breadList:[],
      routeList:[
        {
          name:'官页管理',
          children:[
            {
              name:'首推管理',
              path:'/home/article/list'
            },
            {
              name:'海报管理',
              path:'/home/poster/list'
            },
            {
              name:'广告管理',
              path:'/home/ad/list'
            }
          ]
        },
        {
          name:'推送管理',
          path:'/push/list'
        },
        {
          name:'消息管理',
          path:'/message/list'
        },
        {
          name:'用户管理',
          path:'/user/list'
        },
        {
          name:'活动管理',
          path:'/activity/list'
        },
        {
          name:'审核管理',
          path:'/review/list'
        },
        {
          name:'评论管理',
          path:'/comment/list'
        },
        {
          name:'文章管理',
          path:'/article/list'
        },
        {
          name:'书籍管理',
          path:'/book/list'
        }
      ]
    }
  },
  methods: {

  },
  computed:{

  },
  components: {
      jheader,jmenu,breadlist
  },
  mounted(){
    this.$store.commit('setAjaxData',{userId:123});
    this.islogin = tools.getSession('isLogin');
    this.activeMenu = tools.getSession('activeMenu');
  },
  watch:{
    '$route'(val){
      console.log(val)
      this.breadList = val.matched;
      this.islogin = tools.getSession('isLogin');

      if(val.fullPath != '/'){
        if(tools.getSession('isLogin') != 1){

          tools.router.push({path:'/'})
          tools.toastWarn('你还未登录哦~');
        }
      }else{
        // if(tools.getSession('isLogin') == 1){
        //   tools.router.push({path:'/index'})
        // }
      }
    }
  }
}
</script>

<style>
.mb10{
  margin-bottom: 10px;
}
.pageBlock{
  text-align: center;
  margin: 10px 0;
}
.mainRouter{
  position: absolute;
  top: 88px;
  left: 260px;
  width: calc(100% - 260px);
  padding: 10px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px !important;
  min-height: 600px;
  /*background: #F8F5E9;*/
  max-height: 1000px;
  overflow-y: auto;
}
.elheader{
  background-color: #F8F6E9 !important;
}
.el-table th{
  background-color: transparent;
}
.toastBox{
  top: 220px;
}
#app {
  font-family: Helvetica Neue,Roboto Light,PingFang SC,Lantinghei SC,Hiragino Sans GB,Microsoft Yahei,Arial;
  font-size: 25px;
  padding-bottom: 1px;
}
#app.skin{
  background: #f4f4f4;
}
/*.el-button--primary{
  color: #4a4a4a !important;
}
.el-checkbox__label{
  color: #4a4a4a !important;
}*/
.bread{
  height: 39px;
  line-height: 39px;
  font-size: 15px;
  color: #898989;
  width: 1250px;
  margin:0 auto;
  user-select: none;
}

html,body,#app{
  height: auto;
  position: relative;
  min-height: 100vh;
}
body{
  margin: 0;
}
*{
  box-sizing:border-box !important;
}
.clearfix{
  zoom:1;
}
.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.pull-left{
  float: left;
}
.pull-right{
  float: right;
}

a:link,a:visited,
a:hover,a:active{
  color: #4a4a4a !important;
}

.fold-enter-active {
  animation-name: fold-in;
  animation-duration: .5s;
}
.fold-leave-active {
  animation-name: fold-out;
  animation-duration: .5s;
}
@keyframes fold-in {
  0% {
    transform: translate3d(0, 10%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fold-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 10%, 0);
    opacity: 0;
  }
}

.fade-enter-active {
  animation-name: fade-in;
  animation-duration: .5s;
}
.fade-leave-active {
  display: none;
}
@keyframes fade-in {
  0% {
    opacity: 0;
    transform:translate3d(0,20px,0);
  }
  100% {
    opacity: 1;
    transform:translate3d(0,0,0);
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
